<script lang="ts" setup>
import { ref, defineEmits, computed, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 入参

interface Props {
  modelValue?: Array<any>
  formItem?: any
  disabled?: boolean
  zdlxArr?: Array<any>
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
})
const emit = defineEmits(['update:modelValue'])
const tableData: any = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  },
})
/* 删除 */
const deleteRow = (index: number) => {
  ElMessageBox.confirm('是否确定删除？', '删除提示', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    tableData.value.splice(index, 1)
  })
}
/* 新增 */
const saveRow = (row: any) => {
  row.isAdd = false
}
const formItem = ref<any>(props.formItem)
// 渲染图片
const getImgHref = (imgPath: string) => {
  try {
    return new URL(`/src/assets/images/sjcj/${imgPath}.png`, import.meta.url).href
  } catch (error) {
    console.log(error, 'error')
  }
}
/* 添加表格行 */
const tableRef = ref()
const addCol = () => {
  const bol = tableData.value.find((cur: any) => cur.isAdd)
  if (bol) {
    ElMessage.warning('请先保存当前更改')
    return
  }
  tableData.value.push({
    isAdd: true,
    lxdm: '',
    lxmc: '',
    mrz: null,
    sffk: false,
    sfzj: true,
    zdcd: 0,
    zdid: '',
    zdjd: 0,
    zdmc: '',
    zdzs: '',
  })
  nextTick(() => {
    let table = tableRef.value.layout.table.refs
    // 获取表格滚动元素
    let tableScrollEle = table.bodyWrapper.firstElementChild.firstElementChild
    // 设置表格滚动的位置
    tableScrollEle.scrollTop = tableScrollEle.scrollHeight
  })
}
defineExpose({ addCol })
</script>
<template>
  <el-table :data="tableData" :height="formItem.height || '300px'" ref="tableRef">
    <el-table-column
      v-for="item in formItem.tableHead"
      :key="item.value"
      :prop="item.value"
      :label="item.label"
      :width="item.width || 'auto'"
    >
      <template #default="scope">
        <div v-if="!scope.row.isAdd">
          <!-- icon -->
          <img v-if="item.type === 'img'" :src="getImgHref(item.imgPath)" />
          <span v-else-if="['sffk', 'sfzj'].includes(item.value)">
            {{ scope.row[item.value] ? '是' : '否' }}
          </span>
          <!-- 文字 -->
          <span v-else>{{ scope.row[item.value] }}</span>
        </div>
        <div v-else>
          <el-input v-model="scope.row[item.value]" v-if="item.type === 'input'"></el-input>
          <el-select v-model="scope.row[item.value]" v-else-if="item.type === 'select'">
            <el-option
              v-for="lxItem in props.zdlxArr"
              :key="lxItem.dm"
              :label="lxItem.mc"
              :value="lxItem.dm"
            ></el-option>
          </el-select>
          <el-checkbox
            v-else-if="item.type === 'checkbox'"
            v-model="scope.row[item.value]"
            :true-value="true"
            :false-value="false"
          ></el-checkbox>
        </div>
      </template>
    </el-table-column>
    <el-table-column v-if="formItem.showAction" width="120">
      <template #default="scope">
        <el-link
          type="primary"
          @click="saveRow(scope.row)"
          v-if="scope.row.isAdd"
          :disabled="disabled"
          >确定</el-link
        >
        <el-link type="danger" @click="deleteRow(scope.$index)" :disabled="disabled">删除</el-link>
      </template>
    </el-table-column>
    <!-- 展示操作 -->
  </el-table>
</template>
<style lang="scss" scoped></style>
